<!-- BarEchart.vue 柱形图组件  -->
<template>
  <div id="Barbox">
    <div id="barwrap"></div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
// 引入请求接口
import { getBarData } from "@/utils/https";
export default {
  data() {
    return {
      myChart: "",
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById("barwrap"));
    // 绘制图表
    getBarData().then((res) => {
      if (res.code == 200) {
        this.myChart.setOption(this.options(res.data));
      }
    });
  },
  methods: {
    options(val) {
      let option = {
        title: {
          text: "影厅上座率",
        },
        tooltip: {
          formatter: "{b0}: {c0}%",
        },
        xAxis: {
          data: val.xAxisData,
        },
        grid: {},
        yAxis: {
          name: "上座人数",
          axisLine: {
            show: true, // 显示y轴轴线
            lineStyle: {
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "上座率",
            type: "bar",
            data: val.seriesData,
          },
        ],
      };

      return option;
    },
  },
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */

#barwrap {
  width: 500px;
  height: 500px;
}
</style>